<template>
	<view class="vistorProFile">
		<scroll-view class="scrollWrap" :enhanced="true" scroll-y :bounces="false" :show-scrollbar="false">
			<view class="wrap">
				<view>
					<view>来访者档案</view>
					<!-- <view>为更好地为你服务，咨询师在咨询前需要了解你的一些基本情况，你的信息不会被泄露，请你放心填写。</view> -->
					<u-form labelPosition="left" :model="model1" ref="uForm">
						<u-form-item label="身份" labelWidth="90" prop="userInfo.recordIdentity" borderBottom ref="item1">
							<u-input v-model="model1.userInfo.recordIdentity" disabled disabledColor="#ffffff" border="none"></u-input>
						</u-form-item>
						<u-form-item labelWidth="90" label="姓名" prop="userInfo.recordName" borderBottom ref="item2">
							<u-input disabled disabledColor="#ffffff" v-model="model1.userInfo.recordName" border="none"></u-input>
						</u-form-item>
						<u-form-item label="性别" labelWidth="90" prop="userInfo.gender" borderBottom>
							<u-input disabled disabledColor="#ffffff" v-model="model1.userInfo.gender" border="none"></u-input>
						</u-form-item>

						<u-form-item labelWidth="90" label="手机号码" prop="userInfo.phoneNumber" borderBottom ref="item4">
							<u-input disabled disabledColor="#ffffff" v-model="model1.userInfo.phoneNumber" border="none"></u-input>
						</u-form-item>
						<u-form-item labelWidth="90" label="出生日期" prop="userInfo.birthDate" borderBottom>
							<u-input disabled disabledColor="#ffffff" v-model="model1.userInfo.birthDate" border="none"></u-input>
						</u-form-item>
						<u-form-item labelWidth="90" label="邮箱" prop="userInfo.email" :borderBottom="false">
							<u-input disabled disabledColor="#ffffff" v-model="model1.userInfo.email" border="none"></u-input>
						</u-form-item>
					</u-form>
				</view>
				<view>
					<view>紧急联系人</view>
					<!-- <view>在危机情况下，专家需要以下信息以确保你和他人安全，请务必如实填写，未成年人需要填写监护人信息。</view> -->
					<u-form labelPosition="left" :model="model2">
						<u-form-item labelWidth="90" label="姓名" prop="userInfo.emergencyContactName" borderBottom>
							<u-input disabled disabledColor="#ffffff" v-model="model2.userInfo.emergencyContactName" border="none"></u-input>
						</u-form-item>
						<u-form-item labelWidth="90" label="手机号码" prop="userInfo.emergencyContactPhone" borderBottom>
							<u-input disabled disabledColor="#ffffff" v-model="model2.userInfo.emergencyContactPhone" border="none"></u-input>
						</u-form-item>
						<u-form-item labelWidth="90" label="邮箱" prop="userInfo.emergencyContactEmail" borderBottom>
							<u-input disabled disabledColor="#ffffff" v-model="model2.userInfo.emergencyContactEmail" border="none"></u-input>
						</u-form-item>
						<u-form-item label="关系" labelWidth="90" prop="userInfo.emergencyContactRelation" :borderBottom="false">
							<u-input v-model="model2.userInfo.emergencyContactRelation" disabled disabledColor="#ffffff" border="none"></u-input>
						</u-form-item>
					</u-form>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { consultationRecord } from '@/api/consult/index.js';
export default {
	data() {
		return {
			model1: {
				userInfo: {
					recordIdentity: '',
					recordName: '',
					gender: '',
					birthDate: '',
					phoneNumber: '',
					email: ''
				}
			},
			sexList: [
				{
					id: 0,
					label: '男'
				},
				{
					id: 1,
					label: '女'
				},
				{
					id: 2,
					label: '保密'
				}
			],
			recordIdentityList: [
				{
					id: 1,
					label: '本人'
				},
				{
					id: 2,
					label: '配偶'
				},
				{
					id: 3,
					label: '父母'
				},
				{
					id: 4,
					label: '子女'
				}
			],
			model2: {
				userInfo: {
					emergencyContactName: '',
					emergencyContactPhone: '',
					emergencyContactEmail: '',
					emergencyContactRelation: ''
				}
			}
		};
	},
	onLoad(options) {
		consultationRecord(options.id).then((res) => {
			let obj = res.data;
			this.model1.userInfo = {
				recordIdentity: this.recordIdentityList.find((item) => item.id === obj.recordIdentity * 1)?.label,
				recordName: obj.recordName,
				gender: this.sexList.find((item) => item.id === obj.gender * 1)?.label,
				birthDate: obj.birthDate,
				phoneNumber: obj.phoneNumber,
				email: obj.email
			};
			this.model2.userInfo = {
				emergencyContactName: obj.emergencyContactName,
				emergencyContactPhone: obj.emergencyContactPhone,
				emergencyContactEmail: obj.emergencyContactEmail,
				emergencyContactRelation: this.recordIdentityList.find((item) => item.id === obj.emergencyContactRelation * 1)?.label
			};
		});
	}
};
</script>

<style scoped lang="scss">
.vistorProFile {
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	overflow: hidden;
	.scrollWrap {
		width: 100%;
		height: 100%;
		padding: 20rpx 0;
		box-sizing: border-box;
		.wrap {
			width: calc(100% - 60rpx);
			min-height: 100%;
			margin: auto;
			// margin: 20rpx auto 0;

			> view:nth-child(1) {
				width: 100%;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				> view:nth-child(1) {
					font-size: 40rpx;
					color: #000;
					width: 100%;
					text-align: left;
					margin-bottom: 30rpx;
				}
				// > view:nth-child(2) {
				// 	font-size: 26rpx;
				// 	color: #c6c6c6;
				// 	width: 100%;
				// 	text-align: left;
				// 	margin: 30rpx 0;
				// }
			}
			> view:nth-child(2) {
				width: 100%;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				margin-top: 30rpx;
				> view:nth-child(1) {
					font-size: 40rpx;
					color: #000;
					width: 100%;
					text-align: left;
					margin-bottom: 30rpx;
				}
				// > view:nth-child(2) {
				// 	font-size: 26rpx;
				// 	color: #c6c6c6;
				// 	width: 100%;
				// 	text-align: left;
				// 	margin: 30rpx 0;
				// }
			}
		}
	}
	::v-deep .u-form {
		width: calc(100% - 60rpx);
		margin: auto;
	}
	::v-deep .u-form-item__body {
		padding: 26rpx 0;
	}
}
</style>
